

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">

<head>


    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>人员管理</title>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap 样式文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <!-- 引入字体图标样式 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css">
    <!-- 引入我们自己的首页样式文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> -->
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>

    <%--这里使用相对路径识别不了  所以用${pageContext.request.contextPath}--%>
    <%-- --%>



    <title>Document</title>



</head>

<body>



<center> <h1 style="font-size: 80px;border-width:5px;color: rgb(<%=java.lang.Math.round(java.lang.Math.random()*240)%>,<%=java.lang.Math.round(java.lang.Math.random()*240)%>,<%=java.lang.Math.round(java.lang.Math.random()*240)%>);">
  订单信息表
</h1></center>

<br/>
<br/>



<button  style="background-color:palegoldenrod" onclick="window.location='/Test709/'">返回首页</button>


<div id="yangshi"  style="float: right">
    <button id="yangshi1" style="background-color:red">表格样式一</button>
    <button id="yangshi2" style="background-color: yellow">表格样式二</button>
    <button id="yangshi3" style="background-color: yellow">表格样式三</button>

</div>





<div id="two" style="">
    <table id="dataList" class="table table-bordered table-striped table-hover dataTable text-center">
        <thead>
        <tr  id="dataList1" style="background-color: #00c0ef" class="text-center">
            <th>订单id号</th>
            <th>订单编号</th>
            <th>是否订购</th>
            <th>是否付款</th>
            <th>付款价格</th>
            <th>订单时间</th>
            <th>订单姓名</th>
            <th>订单者地址</th>
            <th>订单者ip</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${orderdata}" var="nature">
            <tr>
                <td>${nature.id}</td>
                <td>
                        ${nature.order_no}
                </td>
                <td>${nature.order_status}</td>
                <td>${nature.pay_status}</td>
                <td>${nature.money}</td>
                <td>${nature.create_time}</td>


                    <c:forEach items="${userdata}" var="nature1">
                        <c:if test="${nature.user_id == nature1.id}">
                <td> ${nature1.name} </td>

                            <td>      ${nature1.address}     </td>
                            <td>      ${nature1.login_ip}     </td>
                        </c:if>
                    </c:forEach>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>









<script>



    document.getElementById("yangshi1").onclick=function (){
        this.style.backgroundColor="red";
        document.getElementById("yangshi2").style.backgroundColor="yellow";
        document.getElementById("yangshi3").style.backgroundColor="yellow";
        document.getElementById("dataList").className="table table-bordered table-striped table-hover dataTable text-center";
        document.getElementById("dataList1").style.backgroundColor="#00c0ef";

    }


    document.getElementById("yangshi2").onclick=function (){
        this.style.backgroundColor="red";
        document.getElementById("yangshi1").style.backgroundColor="yellow";
        document.getElementById("yangshi3").style.backgroundColor="yellow";
        document.getElementById("dataList1").style="";
        document.getElementById("dataList").className="table table-bordered table-striped table-dark dataTable text-center";
    }
    document.getElementById("yangshi3").onclick=function (){
        this.style.backgroundColor="red";
        document.getElementById("yangshi1").style.backgroundColor="yellow";
        document.getElementById("yangshi2").style.backgroundColor="yellow";
        document.getElementById("dataList1").style="";
        document.getElementById("dataList").className="table  table-bordered table-striped";
    }


</script>
</body>

</html>